<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>日程管理</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/mrs.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/media.css{$JSDEBUG}"/>
    <script type="text/javascript" src="__PUBLIC__/app/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
	    $(function() {
	        tab(".manage li", ".time_box", 1);
	        
//             $(".edit_kuang .edit .work").click(function(){
// 				$(".time_box li a.edittime label").html($(this).val());
// 				$(".time_box li a.edittime").css('background','#ffe2c6').css('color','#b58a60').removeClass('edittime');
// 				//alert($(".time_box li  a.edittime label").html());
// 			});
            
// 			$(".edit_kuang .edit .rest").click(function(){
// 				$(".time_box li a.edittime label").html($(this).val());
// 				$(".time_box li a.edittime").css('background','#a7e7ff').css('color','#407184').removeClass('edittime');
// 				//alert($(".time_box li  a.edittime label").html());
// 			});
	    })
	    
	    function tab(a, b, c) {
	        if (c == 1) {
	            $(a).click(function() {
	                var index = $(this).index();
	                $(this).addClass("on").siblings().removeClass("on");
	                $(b).hide();
	                $(b).eq(index).show();
	            })
	        } else {
	            $(a).hover(function() {
	                var index = $(this).index();
	                $(this).addClass("on").siblings().removeClass("on");
	                $(b).hide();
	                $(b).eq(index).show();
	            })
	        }
	    }
	    
    </script>
</head>
<body style="background:#f7f7f9;">
	<section class="mrs_sec">
      <div class="tab">
          <ul class="manage">
              <li class="on"><a href="javascript:;">今天<span>{$today|date='n月j日',###}</span></a></li>
              <li><a href="javascript:;">明天<span></span></a></li>
              <li><a href="javascript:;">后天<span></span></a></li>
          </ul>
          <div class="time_box clear" id="today" data-time="{$today}">
            <ul>
            </ul>
          </div>
          <div class="time_box clear" style="display:none" id="tomorrow" data-time="{$today}">
            <ul>
            </ul> 
          </div>
          <div class="time_box clear"  style="display:none" id="afterTomorrow" data-time="{$today}">
            <ul>
            </ul>
          </div>
          <div class="edit_kuang">
            <div class="edit">
             <ul class="clear">
               <li><input type="button" value="休息" class="rest"></li>
               <li><input type="button" value="上班" class="work" id="submitSetting"></li>
             </ul>
            </div>
          </div>
          <div class="all_tips">
             <dd><span><i></i>不可编辑</span><span><i></i>上班</span><span><i></i>休息</span><span><i></i>编辑</span></dd>
             <p>注：每次只能设置三天内可预约时间，三天后需要重新设置，如未设置则无法被线上预约。</p>
          </div>
       </div>
	</section>
	<include file="Public/beautician-footer" />
	<script>
	var service_time_config_start, service_time_config_end;
	
	function createTimeDom(wrap, data, start, end) {
		var html = '',
			dateObj = new Date();
			currentTime = Math.floor(dateObj.getTime()/1000),
			startTime = 0;
			
		var html = '';
		for (var n = data.day_start; n < data.day_end;) {
			n  += 3600;
			var hour = (new Date(n * 1000)).getHours() + ':00';
			if (n < start || n > end) {
				html += '<li data-time="'+n+'"><a>'+hour+'</a></li>';
			} else if (n >= start && n <= end){
				html += '<li class="gogoing" data-time="'+n+'"><a><span>'+hour+'</span><label>休息</label></a></li>';
			}
		}
		
		wrap.attr('data-time', data.day_start);
		$timeSelectObj = $(html);
		wrap.find('ul').append($timeSelectObj);
			
		orderTimes = [];
		if (orderTimes) {
			orderTimes = $.map(orderTimes, function (i) {
				return parseInt(i);
			});
		}
		
		if (!$.isEmptyObject(data.setting)) {
			var settings = data.setting;
			for (var i in settings) {
				if (settings.hasOwnProperty(i)) {
					var end = parseInt(settings [i].end);
					for (var n = parseInt(settings [i].start); n < end; ) {
						$(wrap).find("[data-time='"+n+"']").find('a').addClass('workTime').find('label').html('上班');
						n += 3600;
					}
				}
			}
		}
		
		$timeSelectObj.each(function(i, o){
			if ($(o).hasClass('gogoing')) {
				$(o).click(function () {
					var clickDom = $(this).find('a');
					if (clickDom.hasClass('selectTime')) {
						clickDom.removeClass('edittime').removeClass('selectTime')
					} else {
						clickDom.addClass('edittime').addClass('selectTime');
					}
				})
			}
		});
	}

	var pad = function(tbl) {
	    return function(num, n){
	        return (0 >= (n - ''+num.length)) ? num : (tbl[n] || (tbl[n] = Array(n + 1).join(0)))+num;
	}    
	}([]);
	
	function buildTimeSelect(data) {
		var Today = data.today;
		var Tomorrow = data.tomorrow;
		var afterTomorrow = data.afterTomorrow;
		
		$timestamp = 24 * 3600;
		createTimeDom($('#today'), Today, service_time_config_start, service_time_config_end);
		createTimeDom($('#tomorrow'), Tomorrow, service_time_config_start + $timestamp,  service_time_config_end + $timestamp);
		createTimeDom($('#afterTomorrow'), afterTomorrow, service_time_config_start + 2 * $timestamp, service_time_config_end + 2 * $timestamp);
		
		var tomorrowDate = new Date((service_time_config_start + $timestamp) * 1000);
		var afterTomorrowDate = new Date((service_time_config_start + 2 * $timestamp) * 1000);
		var tomorrowMonth = tomorrowDate.getMonth();
		var afterTomorrowMonth = afterTomorrowDate.getMonth();
		
		$('.manage li').eq(1).find('span').empty().append(++tomorrowMonth+'月'+tomorrowDate.getDate()+'日');
		$('.manage li').eq(2).find('span').empty().append(++afterTomorrowMonth+'月'+afterTomorrowDate.getDate()+'日');
	}
	
	$(function () {
		var submitSchedule;
		$.ajax({
			url: '{:U("/Beautician/getTime")}',
			dataType: '',
			success: function (result) {
				time = result.data.time;
				
				service_time_config_start = time.config_start;
				service_time_config_end = time.config_end;
				
				buildTimeSelect(time);
			}
		});
		
		function submitSetting () {
			if (submitSchedule && submitSchedule.state() == 'pending') {
				alert('数据正在提交，请等待');
				return false;
			}
			var selectData = {};
			
			$('.time_box').each(function (i, o) {
				var choseTime = {}, select = {start: 0, end: 0}, j = 0;
				var childrenLength = $(o).find('.gogoing').length;
				$(o).find('.gogoing').each(function (m, go) {
					console.log($(go).find('a').hasClass('workTime'));
					if (!$(go).find('a').hasClass('workTime')) {
						if (select.start != 0) {
							select.end = parseInt($(go).attr('data-time'));
							choseTime [j] = $.extend({}, select);
							select = {start: 0, end: 0};
							++j;
							
						}
					} else if ($(go).find('a').hasClass('workTime')){
						if (select.start == 0) {
							select.start = parseInt($(go).attr('data-time'));
						}
					}
					
					if (m == childrenLength - 1) {
						if (select.start != 0) {
							select.end = parseInt($(go).attr('data-time')) + 3600;
							choseTime [j] = $.extend({}, select);
							select = {start: 0, end: 0};
							++j;
						}
						selectData [$(o).attr('data-time')] = choseTime;
					}
				});
			});
			console.log(selectData);
			return false;
			submitSchedule = $.ajax({
				url: '{:U("Beautician/scheduleManage")}',
				data: {setting: selectData},
				dataType: 'json',
				type: 'post',
				success: function (result) {
					if (result.status != '1') {
						alert('设置失败');
					}
				},
				error: function () {
					
				}
			});
		}
		
		$('.rest').click(function () {
			$('.selectTime').each(function (i, o) {
				$(o).removeClass('edittime').removeClass('workTime').find('label').html('休息');
				if (i == $('.selectTime').length-1) {
					$('.selectTime').removeClass('selectTime');
					submitSetting();
				}
			})
		});
		
		$("#submitSetting").click(function () {
			$('.selectTime').each(function (i, o) {
				$(o).removeClass('edittime').addClass('workTime').find('label').html('上班');
				if (i == $('.selectTime').length-1) {
					$('.selectTime').removeClass('selectTime');
					submitSetting();
				}
			})
		});
	})
	</script>
</body>
</html>